<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生管理系统</title>
    <!-- 引入bootstrap -->
    <link rel="stylesheet" href="./bootstrap/bootstrap.css">
    <script src="./bootstrap/jquery.js"></script>
    <script src="./bootstrap/popper.js"></script>
    <script src="./bootstrap/bootstrap.js"></script>
    <!-- 引入自己的css -->
    <link rel="stylesheet" href="./css/main.css">
 

</head>

<body>
    <header id="head">
        <div class="navbar position-relative bg">
            <!-- 图标按钮 -->
            <button class="btn btn-outline-light d-md-none navbar-toggler" data-toggle="collapse" data-target="#myNav">
                <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img"
                focusable="false">
                <title>Menu</title>
                <path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"
                    d="M4 7h22M4 15h22M4 23h22"></path>
            </svg>
            </button>
            <!-- 图标logo -->
            <div class="navbar-brand mx-auto ml-md-0">
                <img style="width: 3rem;" src="./images/logo.png" alt="松松学长">
                <span class="text-white font-weight-bold align-middle ml-3 d-inline-block">教</span>
                <span class="text-white font-weight-bold align-middle ml-3 d-inline-block">务</span>
                <span class="text-white font-weight-bold align-middle ml-3 d-inline-block">在</span>
                <span class="text-white font-weight-bold align-middle ml-3 d-inline-block">线</span>
            </div>
            <div class="exit mr-0">
                <span class="my"></span>
                <a href="./admin/login.html">退出</a>
                <span>/</span>
                <a href="./admin/update.html" class="">修改</a>
            </div>
            <!-- 导航项 -->
            <div class="navbar-collapse collapse position-absolute w-100 text-center" id="myNav">
                <nav class="py-3 nav flex-column">
                    <a href="#student-list" class="nav-link active" data-toggle="tab">学生列表</a>
                    <a href="#student-add" class="nav-link" data-toggle="tab">新增学生</a>
                    <a href="#student-echarts" class="nav-link" data-toggle="tab">统计图表</a>
                </nav>
            </div>
        </div>
    </header>
    <div class="container-fluid main">
        <div class="row">
            <!-- 左边部分 -->
            <div class="pt-4 pr-0 pl-4 d-none d-md-block leftCon col-2">
                <h5 class="text-white font-weight-bold mb-4">学生管理</h5>
                <nav class="nav flex-column">
                    <a href="#student-list" class="nav-link text-white font-weight-bold py-3 text-center active"
                        data-toggle="tab">学生列表</a>
                    <a href="#student-add" class="nav-link text-white font-weight-bold py-3 text-center"
                        data-toggle="tab">新增学生</a>
                    <a href="#student-echarts" class="nav-link text-white font-weight-bold py-3 text-center"
                        data-toggle="tab">统计图表</a>
                </nav>
            </div>
            <!-- 右边部分 -->
            <div class="col-md-10 rightCon col p-0">
                <div class="tab-content">
                    <!-- student-list -->
                  <div class="tab-pane fade show active bg-white p-4" id="student-list">
                        <div class="form-group form-inline flex-nowrap">
                            <label for="search-inp" class="col-form-label font-weight-bold text-nowrap">搜索：</label>
                            <input type="text" placeholder="请输入学号或姓名" class="form-control" id="search-inp">
                            <button class="btn btn-dark ml-2 text-nowrap" id="search-btn">搜索</button>
                        </div>

                        <table id="students-table" class="table table-borderless text-center">
                            <thead class="table-secondary">
                                <tr class="text-nowrap">
                                    <th>学号</th>
                                    <th>姓名</th>
                                    <th>性别</th>
                                    <th>学院</th>
                                    <th>年级</th>
                                    <th>班级</th>
                                    <th>专业</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="table-body" class="table-light">
                                <tr>
                                    <td>2018211483</td>
                                    <td>郎云松</td>
                                    <td>男</td>
                                    <td>计算机科学与技术学院</td>
                                    <td>2018</td>
                                    <td>04011805</td>
                                    <td>计算机科学与技术</td>
                                    <td>
                                        <button class="btn edit btn-success text-nowrap" data-toggle="modal" data-target="#editMessage"
                                        
                                        >编辑</button>
                                        <button class="btn del btn-danger text-nowrap">删除</button>
                                    </td>
                                </tr> 
                       
                            </tbody>
                        </table>
                        <div id="page" class="d-flex justify-content-center"></div>
                  </div>
                  <!-- student-add -->
                  <div class="tab-pane fade" id="student-add">
                    <form id="add-student-form" class="w-50 mx-auto m-5">
                        <div class="form-group row">
                            <label for="sNo" class="col-sm-2 col-form-label">学&nbsp;&nbsp;&nbsp;&nbsp;号：</label>
                            <input type="text" name="sNo" class="form-control col-sm-10">
                        </div>
                        <div class="form-group row">
                            <label for="name" class="col-sm-2 col-form-label ">姓&nbsp;&nbsp;&nbsp;&nbsp;名：</label>
                            <input  name="name" type="text" class="form-control col-sm-10">
                        </div>
                        <div class="form-group row">
                            <label for="sex" class="col-form-label col-sm-2  mb-0">性&nbsp;&nbsp;&nbsp;&nbsp;别：</label>
                            <div class="col-sm-10 d-flex">
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="sex" value="1"
                                        checked>
                                    <label class="form-check-label" for="male">男</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio"  name="sex" value="0">
                                    <label class="form-check-label" for="female">女</label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="email" class="col-sm-2 col-form-label">学&nbsp;&nbsp;&nbsp;&nbsp;院：</label>
                            <input name="email" type="text" class="form-control col-sm-10">
                        </div>
                        <div class="form-group row">
                            <label for="birth" class="col-sm-2 col-form-label">年&nbsp;&nbsp;&nbsp;&nbsp;级：</label>
                            <input  name="birth" type="text" class="form-control col-sm-10">
                        </div>
                        <div class="form-group row">
                            <label for="phone" class="col-sm-2 col-form-label">班&nbsp;&nbsp;&nbsp;&nbsp;级：</label>
                            <input  name="phone" type="text" class="form-control col-sm-10">
                        </div>
                        <div class="form-group row">
                            <label for="address"
                                class="col-sm-2 col-form-label">专&nbsp;&nbsp;&nbsp;&nbsp;业：</label>
                            <input type="text" name="address"  class="form-control col-sm-10">
                        </div>
                        <div class="form-group text-center">
                            <button type="button" class="btn btn-success btn-lg" id="add-student-btn">添加</button>
                            <button type="reset" class="btn btn-secondary btn-lg ml-4">重置</button>
                        </div>
                    </form>
                  </div>
                  <!-- student-echars -->
                  <div class="tab-pane fade" id="student-echarts">
                    <div class="d-flex flex-wrap mychars">
                        <div class="m-5">
                            <div class="areaChart"></div>
                        </div>
                        <div class="m-5">
                            <div class="sexChart"></div>
                        </div>
                    </div>
                  </div>
                </div>
              </div>
        </div>
    </div>
    <!-- 模态框 -->
    <div class="modal fade" id="editMessage"  >
		<div class="modal-dialog modal-dialog-centered">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">编辑信息</h5>
					<button type="button" class="close" data-dismiss="modal">
						<span>&times;</span>
					</button>
				</div>
				<div class="modal-body text-center">
					<form id="edit-form" class="d-inline-block">
						<div class="form-group form-inline">
							<label for="sNo">学&nbsp;&nbsp;&nbsp;&nbsp;号：</label>
							<input type="text" name="sNo" class="form-control">
						</div>
						<div class="form-group form-inline">
							<label for="name">姓&nbsp;&nbsp;&nbsp;&nbsp;名：</label>
							<input name="name" type="text" class="form-control">
						</div>
						<div class="form-group form-check form-check-inline w-100">
							<label for="sex" class="mb-0">性&nbsp;&nbsp;&nbsp;&nbsp;别：</label>
							<input class="form-check-input" type="radio" name="sex" value="1" checked>
							<label class="form-check-label" for="male">男</label>
							<input class="form-check-input ml-3" type="radio" name="sex" value="0">
							<label class="form-check-label" for="female">女</label>
						</div>
						<div class="form-group form-inline">
							<label for="email" >学&nbsp;&nbsp;&nbsp;&nbsp;院：</label>
							<input name="email" type="text" class="form-control" readonly>
						</div>
						<div class="form-group form-inline">
							<label for="birth">年&nbsp;&nbsp;&nbsp;&nbsp;级：</label>
							<input  name="birth" type="text" class="form-control">
						</div>
						<div class="form-group form-inline">
							<label for="phone">班&nbsp;&nbsp;&nbsp;&nbsp;级：</label>
							<input name="phone" type="text" class="form-control">
						</div>
						<div class="form-group form-inline">
							<label for="address">专&nbsp;&nbsp;&nbsp;&nbsp;业：</label>
							<input type="text" name="address" class="form-control">
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-success" data-dismiss="modal" id="editSubmitBtn">提交</button>
					<button type="reset" class="btn btn-primary" id="editResetBtn">重置</button>
				</div>
			</div>
		</div>
	</div>


</body>
   <!-- 引入功能插件 -->
   <!-- <script src="./js/cookie.js"></script> -->
   <script src="./turnPage/js/index.js"></script>
   <!-- 引入echars -->
   <script src="./js/echarts.js"></script>
   <script src="./js/pie.js"></script>
    <!-- 引入自己的js -->
   <script src="./js/index.js"></script>

</html>